import React from "react";
import { Table, Space, Button, Modal,Image} from "antd";
import { put,frozen } from "../../services/user";
// import { ExclamationCircleOutlined,UserOutlined } from "@ant-design/icons";
import { url } from "../../services";
const { Column } = Table;
export default function List({ show, users, pagination,setAddr,addr }) {
  const handleChange = ({ current, pageSize }) => {
    console.log(current, pageSize);
    show({ current, pageSize });
  };
  const handleFrozen = async (id,text) => {
    console.log(id,text.state);
    let res=await frozen(id,text.state);
    console.log(res);
    show();
  };

  const [isModalVisible, setIsModalVisible] = React.useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  }; //点击收货查看

  
  const handleGet = async (id) => {
    showModal();
    let data = await put(id);
    console.log("收货地址", data);
    setAddr(data.data.addr)
    console.log(addr); 
  };

  return (
    <div>
      <Table
        rowKey="_id"
        dataSource={users}
        pagination={pagination}
        onChange={handleChange}
      >
        <Column width="300px" title="openid" dataIndex="openid" key="openid" />
        <Column title="昵称" dataIndex="nickname" key="nickname" />
        <Column title="性别" dataIndex="gender" key="gender" />
        <Column title="头像" render={(text, record)=><Image width={50} height={50} src={url+'/images/'+record.avatar}></Image>} key="image" >
        </Column>
        <Column
          width="200px"
          title="收货地址"
          key="action"
          render={(text, record) => (
            <Space size="middle">
              <Button type="primary" onClick={() => handleGet(record._id)}>
                查看地址
              </Button>
            </Space>
          )}
        />
        
        <Column title="账户状态" render={(text,record)=>record.state == "false"? "冻结":"正常"} key="state" />
        <Column
          width="200px"
          title="操作"
          key="action"
          render={(text, record) => (
            <Space size="middle" >
              <Button
                type="primary"
                danger
                onClick={() => handleFrozen(record._id,text)}
              >
              {record.state == "false"? "解封":"冻结"}
              </Button>
            </Space>
          )}
        />
      </Table>
      <Modal
        title="查看地址"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      width={1000}
      >
        <Table
          rowKey="id"
          dataSource={addr}
          pagination={false}
          // onChange={handleChange}
        >
          <Column title="收货人" dataIndex="reName" key="reName" />
          <Column title="手机号" dataIndex="rePhone" key="rePhone" />
          <Column title="所在地区" dataIndex="area" key="area" />
          <Column title="详细地址" dataIndex="detailAddr" key="detailAddr" />
          <Column title="地址标签" dataIndex="label" key="label" />
        </Table>
      </Modal>
    </div>
  );
}
